import React, { useState } from "react";
import {
  Switch,
  Spin,
  Tag,
  Space,
  Breadcrumb,
  Table,
  message,
  Popconfirm,
  Drawer,
} from "antd";
import {
  EyeFilled,
  DeleteFilled,
} from "@ant-design/icons";
// import "./news.css";
import { Link } from "react-router-dom";
import { _blogList, _updateBlogTop, _delBlog } from "../../util/api/blog/index";
import moment from "moment";
import marked from "marked";

marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  pedantic: false,
  sanitize: false,
  tables: true,
  breaks: false,
  smartLists: true,
  smartypants: false,
});
class NewsList extends React.Component {
  state = {
    isLoading: false,
    blogList: null,
    visible: false,
    markdownContent: "",
    blogTitle:''
  };
  getData = () => {
    this.setState({ isLoading: true });
    _blogList(0)
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          this.setState({ isLoading: false });

          const blogList = res.data.data;
          for (let i = 0; i < blogList.length; i++) {
            blogList[i].key = blogList[i].blog_id;

            blogList[i].title = blogList[i].blog_title;
            blogList[i].userName = blogList[i].user_name;
            blogList[i].blogType = blogList[i].content_type_name;
            blogList[i].isTop = blogList[i].is_top;
            blogList[i].control = blogList[i].blog_id;
            blogList[i].time = moment(blogList[i].blog_time).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          }
          this.setState({ blogList: blogList });
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };
  componentDidMount = () => {
    this.getData();
  };

  deletSource = (val) => {
    _delBlog(val)
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          message.success("删除成功");
          this.getData();
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };

  handleTop = (val, blog_id) => {
    let temp = {};
    console.log(val);
    if (val) {
      //取消置顶
      temp.is_top = 0;
      _updateBlogTop(blog_id, temp).then((res) => {
        console.log(res);
        message.success("取消置顶成功");
        this.getData();
      });
    } else {
      //置顶操作
      temp.is_top = 1;
      _updateBlogTop(blog_id, temp).then((res) => {
        console.log(res);
        message.success("置顶成功");
        this.getData();
      });
    }
  };
  viewHandle = (val) => {
    this.setState({
      visible: true,
      blogTitle:val.blog_title,
      markdownContent: marked(val.blog_content),
    });
  };

  handleCancel = (e) => {
    this.setState({
      visible: false,
    });
  };

  render() {
    const columns = [
      {
        title: "文章名称",
        dataIndex: "title",
      },
      {
        title: "作者",
        dataIndex: "userName",
      },
      {
        title: "发布时间",
        dataIndex: "time",
      },
      {
        title: "文章类型",
        dataIndex: "blogType",
        render: (text, record) => (
          <>
            {text === "学习心得" ? (
              <Tag color="blue" key={text}>
                {text}
              </Tag>
            ) : (
              <Tag color="cyan" key={text}>
                {text}
              </Tag>
            )}
          </>
        ),
      },
      {
        title: "置顶",
        dataIndex: "isTop",
        render: (text, record) => (
          <>
            <Switch
              checkedChildren="取消"
              unCheckedChildren="置顶"
              defaultChecked={text}
              onClick={this.handleTop.bind(this, text, record.blog_id)}
            />
          </>
        ),
      },
      {
        title: "操作",
        dataIndex: "control",
        render: (text, record) => (
          <Space size="middle">
            <EyeFilled onClick={this.viewHandle.bind(this, record)} />
            <Drawer
              title={this.state.blogTitle}
              placement="left"
              closable={false}
              onClose={this.handleCancel}
              visible={this.state.visible}
              width="60vw"
            >
              <div
                className="introduce-html"
                dangerouslySetInnerHTML={{ __html: this.state.markdownContent }}
              ></div>
            </Drawer>
            <Popconfirm
              title="确认要删除吗？"
              okText="是"
              cancelText="否"
              onConfirm={this.deletSource.bind(this, text)}
            >
              <DeleteFilled style={{ color: "#7f8c8d" }} />
            </Popconfirm>
          </Space>
        ),
      },
    ];

    return (
      <div>
        <div className="newslist-header">
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>
              <Link to="/m/index">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>博客管理</Breadcrumb.Item>
            <Breadcrumb.Item>博客列表</Breadcrumb.Item>
          </Breadcrumb>

          <div></div>
        </div>

        <div className="admin-body" style={{ padding: 15, minHeight: 360 }}>
          <Spin tip="Loading..." spinning={this.state.isLoading}>
            <Table
              columns={columns}
              dataSource={this.state.blogList}
              // rowSelection={rowSelection}
              pagination={{ pageSize: 6 }}
              // scroll={{ y: 300 }}
            />
          </Spin>
        </div>
      </div>
    );
  }
}

export default NewsList;
